<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
    .box {
        position: relative;
        margin: 100px auto;

        width: 100px;
        height: 100px;
        border: 1px solid #f5f5f5;
        text-align: center;
        color: red;
    }

    .box img {
        width: 95px;
        height: 95px;
        background-size: contain;
    }

    .box .close-btn {
        display: inline-block;
        width: 20px;
        height: 20px;

        position: absolute;
        top: 0;
        left: 0;
        transform: translateX(-100%);

        cursor: pointer;
        border: 1px solid #f5f5f5;
    }

    .close-code {
        display: none;
    }
</style>


<body>

  <div class="box">
    淘宝二维码
    <img alt="" src="../images/tao.png">
    <i class="close-btn" onclick="closeCode()">×</i>
  </div>

  <script>
    const box = document.querySelector('.box');

    function closeCode() {
      // box.style.display = 'none';

      addClass(box, 'close-code')
    }

    function addClass(el, className) {
      if (!el.classList.contains(className)) {
        // dom API 添加类名样式
        el.classList.add(className)
      }
    }

    function removeClass(el, className) {
      // dom API 移除类名样式
      el.classList.remove(className)
    }
  </script>
</body>
</html>
